<template>
	<div class="cityAlp">
		<ul>
			<li 
			v-for="(val,key,index) of cities" 
			:key="key"
			:index="index" 
			@click="clickHandler(index)"
			@touchstart="touchstartHander"
			@touchmove="touchmoveHander"
			@touchend="touchendHander"
			>
				{{key}}
		    </li>			
		</ul>
	</div>
</template>

<script type="text/javascript">
	export default{
		name:'cityAlp',		
		props:['cities'],
		data:function(){
			return {
				startindex:null,
				startY:0,
				curindex:0
			}
		},
		methods:{
			clickHandler:function(index){
				//发送索引到组件的父级
				this.$emit('passalpindex',index);
			},
			touchstartHander:function(evt){				
				//记录用户开始滑动时的位置 和索引
				this.startindex=evt.target.getAttribute('index');
				this.startY=evt.touches[0].clientY;
			},
			touchmoveHander:function(evt){
				//滑动过程中根据手指的位置判断 手指所在的位置
				var cha=evt.touches[0].clientY-this.startY;
				if(cha>0){
					//用户在向下滑动
					var chaindex=Math.ceil(cha/44);					
				}else{
					//用户在向上滑动
					var chaindex=Math.floor(cha/44);	
				}
				//用户现在手指所处位置的索引值
				this.curindex=parseInt(this.startindex)+parseInt(chaindex);	

				this.$emit('passalpindex',this.curindex);
			},
			touchendHander:function(){
				
			}
		}
	}
</script>

<style type="text/css" scoped>
.cityAlp{
	position: fixed;
	top:55%;
	right: 16px;
	z-index: 2000;
	transform: translateY(-50%);
}
.cityAlp li{
	width: 22px;
	height: 44px;
	font-size: 28px;
	color: #22c5da;
}
</style>